<template>

  <div class="page-header-index-wide">

    <a-card :bordered="false" :body-style="{padding: '0'}" >
      <a-form layout="inline" style="margin-left: 50px; margin-top: 5px">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="时间">
              <g-year-picker
                placeholder="请选择学年"
                :is-init="false"
                v-model="date"
              ></g-year-picker>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-row :gutter="24" style="margin-top: 20px">
      <a-col :sm="24" :md="12" :xl="6" >
        <chart-card :loading="loading" title="总课时量" total="231630">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="down" style="margin-right: 16px;">
              <span slot="term">年同比</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">月同比</span>
              11%
            </trend>
          </div>
          <template slot="footer">人均课时量<span>220</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="横向课题完成率" total="78%">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
          </div>
          <template slot="footer">
            <div>
              <span slot="term">到款金额:</span>
              ￥xxxx万
              <span style="margin-left: 5px" slot="term">培训人数:</span>
              XXXX人
            </div>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="指标项" :total="8846 | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">XXXX<span> {{ '1234' | NumberFormat }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="指标项" :total="6560 | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :height="40" />
          </div>
          <template slot="footer">指标项 <span>60%</span></template>
        </chart-card>
      </a-col>
    </a-row>
    <school-classtime-bashboard :date="date"></school-classtime-bashboard>
    <school-teaching-bashboard :date="date"></school-teaching-bashboard>
    <school-research-bashboard :date="date"></school-research-bashboard>
  </div>
</template>

<script>

import SchoolClasstimeBashboard from '@views/dashboard/gfxy/school/SchoolClasstimeBashboard'
import GYearPicker from '@views/gfxy/common/GYearPicker'
import moment from 'moment'
import SchoolResearchBashboard from '@views/dashboard/gfxy/school/SchoolResearchBashboard'
import SchoolTeachingBashboard from '@views/dashboard/gfxy/school/SchoolTeachingBashboard'

import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import Trend from '@/components/Trend'

export default {
  name: "IndexSchool",
  components:{
    SchoolResearchBashboard,
    GYearPicker, SchoolClasstimeBashboard,SchoolTeachingBashboard,
    ChartCard,ACol,ATooltip,MiniArea,MiniBar,MiniProgress,Trend
  },
  data() {
    return {
      loading: false,
      date: moment().format('YYYY'),
    }
  }

}
</script>

<style scoped>

</style>